<template>
  <div class="WorkGroup minifont">
    <div class="main-title" v-if="!dUserinfo.is_me" style="text-align: left">
      <span v-if="dataList.length>0">你可以从以下专辑中选择</span>
      <div v-else>
        <p>用户还没创建专辑</p>
        <div class="btn btn-default col-xs-offset-5 col-xs-2" @click="goBack">返回</div>
      </div>

    </div>
    <div v-if="dUserinfo.is_me" style="margin: .4rem;position: relative" @click="showWorkGroupEdit">
      <PlusBlock></PlusBlock><span class="midfont" style="position: absolute;left: 3rem;top:.8rem;">新建专辑</span>
      <br><hr>
    </div>
    <ul class="dataList">
      <li v-for="v in dataList" >
          <ImageBlock width="100%" height="3.2rem" :img-src="v.cover_img" @click.native="showWorksByGroupId(v.id,v.artist_name)">
            <span slot="leftBottom" v-if="!dUserinfo.is_me">
              <span class="visit_count"><i class="fa fa-eye"></i> {{v.visit_count}}</span>
            </span>
          </ImageBlock>
        <OpEditDel @editDo="editDo(v.id)" @deleteDo="deleteDo(v.id,v.has_work_count)" v-if="dUserinfo.is_me"></OpEditDel>
        <div class=" title">{{v.title}}</div>
        <div class=" has_work_count">{{v.has_work_count}}个作品</div>
      </li>
    </ul>
  </div>
</template>
<script>
import ImageBlock from "../../components/images/ImageBlock";
import OpEditDel from "../../components/buttons/OpEditDel";
import PlusBlock from "../../components/buttons/PlusBlock";
export default {
  data(){
    return {
      dataList:[],
      dUserinfo:[]
    }
  },
  methods:{
    goBack(){
      this.$router.push({
        name:"Work",
        query:{
          showIntroMask:0
        }
      })
    },
    editDo(id){
      this.$router.push({path:'/WorkgroupEdit',query:{groupId:id}})
    },
    deleteDo(id,has_work_count){
      let _this=this
      let dobool = false
      if(has_work_count>0){
        if(confirm("删除专辑，该专辑下的作品将失去专辑")){
          dobool=true
        }else{
          dobool=false
        }
      }else{
        dobool=true
      }
      if (dobool){
        myjs.removeWorkGroup({groupId:id},function(data){
          _this.getWorksGroupListByUid(_this.dUserinfo.uid)
        })
      }

    },
    showWorkGroupEdit(){
      let _this = this
      myjs.createOneNewWorkGroupTemp({uid:_this.dUserinfo.uid},function(data){
        _this.$router.push({name:"WorkGroupEdit",query:{groupId:data.data}})
      },function(){
        console.log("error");
      })
    },
    getWorksGroupListByUid(uid){
      let _this = this
      let params={uid:uid}
      if (_this.dUserinfo.is_me)params.status=[1,0]
      myjs.getWorksGroupListByUid(params,function(data) {
        _this.dataList = data.data
      },function(){
        _this.dataList = []
      })
    },
    showWorksByGroupId(groupId,artist_name){
      this.$router.push({name:"WorkGroupWorks",query:{groupId,groupName:artist_name}})
    }
  },
  components:{PlusBlock, OpEditDel, ImageBlock},
  mounted() {
    let _this=this
    this.dUserinfo = this.$store.getters.getUserinfo
    if (!this.dUserinfo.uid)this.$router.push({name:"PersonIndex"})
    _this.getWorksGroupListByUid(_this.dUserinfo.uid)
  }
}
</script>
<style scoped>
.WorkGroup{padding: .2rem}
.main-title{margin: .4rem;}
ul.dataList{display: flex;flex-wrap: wrap}
ul.dataList li{flex:1;max-width: 4.8rem;min-width: 4.8rem;position: relative;line-height:.5rem;margin-bottom:1px;
padding: .2rem;box-sizing: border-box;
}
.visit_count{color: #fff;position: absolute;left: 0;bottom: 0;font-size: .4rem;padding: .03rem .3rem .03rem .1rem;
background: linear-gradient(to right,rgba(0,0,0,.8),rgba(0,0,0,.1));
  width: 1.7rem;height:.5rem ;
}
ul.dataList li .row{overflow: hidden}
</style>
